<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">
                <fileTreesCQBC @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick"
                    :menuId="menuId">
                </fileTreesCQBC>

            </el-col>
            <!--离线接收数据-->
            <el-col :span="20" :xs="24" v-show="isShow">
                <el-card class="box-card" ref="refCard">
                    <div slot="header" class="clearfix">
                        <span>节点信息</span>
                    </div>
                    <el-row :gutter="10" class="mb8" ref="refbut">
                        <el-col :span="1.5">
                            <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">添加</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="pathList" style="width: 100%" :height="200" @cell-click="handleRowClick">
                        <el-table-column prop="name" label="数据节点名称">
                        </el-table-column>
                        <el-table-column prop="path" label="存储地址">
                        </el-table-column>
                        <el-table-column label="状态" prop="state" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.state" active-value="1" inactive-value="0"
                                    @change="handleStatusChange(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注">
                        </el-table-column>
                        <el-table-column label="操作" width="100px">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <div style="margin-top:10px" v-if="isdaShow">
                    <queryCriteriaList v-if="listFrom.length > 0" :showSearch="showSearch" :listFrom="listFrom"
                        @resetQuery="resetQuery" @handleQuery="handleQuery" ref="queryForm">
                    </queryCriteriaList>
                    <el-row :gutter="10" class="mb8" ref="refbut">
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-printer" @click="handleGSZHTap">格式转换</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="queryTableTap"></right-toolbar>
                    </el-row>
                    <tableList v-if="tableHeight" :tableHeaderList="tableHeaderList"
                        @handleSelectionChange="handleSelectionChange" :tableData="tableData" :loading="loading"
                        :tableHeight="tableHeight" @celldblclick="celldblclick" @sortChange="sortChange" ref="ref">
                    </tableList>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getlistPost" />
                </div>
            </el-col>

            <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
                <el-empty :image-size="200"></el-empty>
            </el-col>

        </el-row>

        <!--start  组件详情 -->
        <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose">
        </jianDetailsOpen>
        <!--end 组件详情 -->
        <!-- start 组卷\项目详情 -->
        <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData" module="fileCollection"
            :isParams="1" :treeRowData="treeRowData" @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
        <!-- end 组卷\项目详情 -->
        <!-- start 添加修改位置 -->
        <deit v-if="deitOpen" :deitOpen="deitOpen" @closeDelDialog="closeDelDialog" :categoryId="queryParams.categoryId"
            :row="row" @addsubmitForm="addsubmitForm">
        </deit>
        <!--end  添加修改位置-->
    </div>
</template>
<script>

import { getqueryfieldList, getthbytreenodeHeaderList, getlistbytreenodeList, getPath, deletePath, updateEnable, trans } from "@/api/cqbc/dataManage/yqDatamanageTree.js"
import queryCriteriaList from "@/components/queryCriteriaList/index.vue"  //查询列表
import fileTreesCQBC from "@/components/fileTreesCQBC/index.vue"  //档案树
import { getGroupTree } from "@/api/archive/archivesCategory.js"
import tableList from "@/components/tableList/index.vue"

import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
import jianDetailsOpen from '@/components/componentsJianDetailsCqbc/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetailsCqbc/index.vue' //卷详情

import { getLastIndexOf } from "@/utils/index.js"
import { getTypeObject } from '@/api/archive/dict/dictManageData'
import deit from "@/views/cqbc/dataManage/yqDatamanageTree/deit.vue"
export default {
    mixins: [treeHeight], // 混入方法
    components: {
        queryCriteriaList,
        fileTreesCQBC,
        tableList,
        jianDetailsOpen,
        juanDetailsOpen,
        deit
    },
    data() {
        return {
            isnoClick: true, //防止树重复点击
            loading: false,
            // 显示搜索条件
            showSearch: true,
            listFrom: [], //查询框列表
            isShow: false, //是否显示右侧数据 isShow:true,  //判断  著录项目内件按钮是否显示
            isdaShow: false,//是否显示档案数据
            isShowButton: true,
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
            },
            tableHeaderList: [], //table表头数据
            tableData: [],//table列表数据

            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            openInfo: { //件 卷  项目
                opens: false,
                categoryId: undefined,
                menuId: undefined,
                type: undefined
            },
            tableHeight: "",
            ids: undefined,
            single: "",
            multiple: true,
            rowList: "",//当前点击的数据
            treeRowData: "", //点击档案树显示当前点击数据
            subStr: "",  //获取点击当前树的 件 卷  项目 截取 sub_table_name显示
            categoryType: "",
            menuId: '',
            dictList: [],
            pathList: [],
            deitOpen: false,
            row: ""
        }
    },

    created() {
        this.menuId = this.$route.meta.menuId
        // getRouters().then(res => {
        //   this.routeList = res.data
        // })
    },


    methods: {

        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 200
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    if (this.$refs.refCard) {
                        h = h - this.$refs.refCard.$el.offsetHeight
                    }

                    if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                        h = h - this.$refs.refbut.$el.offsetHeight
                    }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 290 ? h : 290 // 根据自己项目定高度

                    return h
                }
            )

        },

        // 树节点单击事件
        onTreeClick(data) {
            var that = this;
            this.isnoClick = false;
            that.treeRowData = data;
            that.isdaShow = false;
            if (data.categoryId != null) {
                that.isShow = true
            } else {
                that.isShow = false
            }
            if (that.$refs.queryForm != undefined) {
                that.$refs.queryForm.queryParams = {};
            }
            if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
                that.isnoClick = true;
                return false;

            }
            // that.loading = true;
            that.queryParams = data;
            that.queryParams.order = '';
            that.queryParams.pageNum = 1;
            that.queryParams.pageSize = 20;
            if (this.queryParams.sub_table_name != undefined) {
                this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
                let stb = this.queryParams.sub_table_name;
                let stbArr = stb.split("_");
                this.categoryType = stbArr[stbArr.length - 3];
                console.log(this.subStr, this.categoryType)
            } else {
                this.getGroupTreePost(data.categoryId);
            }

            if (this.$refs.ref != undefined) {
                this.$refs.ref.clearSort()
            }


        },


        //档案门类树门类根据categoryID回显
        getGroupTreePost(ID) {
            getGroupTree(ID).then(response => {
                this.queryParams.type = response.data.type
                if (response.data.type == "0") { //件
                    this.queryParams.level = "jian"
                    this.queryParams.zlfs = "0"
                    this.queryParams.sub_table_name = response.data.fileTableName;
                } else if (response.data.type == "1") { //卷
                    this.queryParams.level = "juan"
                    this.queryParams.zlfs = "1"
                    this.queryParams.sub_table_name = response.data.folderTableName;
                } else { //项目
                    this.queryParams.level = "xiangmu"
                    this.queryParams.zlfs = "3"
                    this.queryParams.sub_table_name = response.data.itemTableName;
                }
                this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
                let stb = this.queryParams.sub_table_name;

                let stbArr = stb.split("_");

                this.categoryType = stbArr[stbArr.length - 3];


                this.getPathPost(); //获取门类存储位置


            });
        },


        /** 点击树节点获取查询字段 */
        getqueryfieldListPost(data) {
            this.queryParams.searchcolumn = undefined
            getqueryfieldList({
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                type: this.queryParams.type,
            }).then(response => {
                if (response.code == "200") {
                    this.listFrom = response.data;
                }

            });
        },
        /**点击树节点,获取table表头数据 */
        getlistHeaderPost() {
            var that = this;
            getthbytreenodeHeaderList({
                categoryId: that.queryParams.categoryId,
                menuId: that.queryParams.menuId,
                level: that.queryParams.level
            }).then(response => {
                this.tableHeaderList = response.data;
                var fields = []
                for (var i in response.data) {
                    fields.push(response.data[i].FIELD_NAME)
                }
                this.queryParams.fields = fields.toString()
                //获取指定字典列表
                var headerlist = [];
                for (var i = 0; i < this.tableHeaderList.length; i++) {
                    if (this.tableHeaderList[i].SHOWTYPE.toString().indexOf('5') != -1) {
                        this.tableHeaderList[i].SHOWTYPE = 5
                    }
                    if (this.tableHeaderList[i].SHOWTYPE == 5) {
                        // console.log(this.tableHeaderList[i])
                        headerlist.push(this.tableHeaderList[i].FIELD_NAME)
                    }
                }

                if (headerlist.length > 0) {
                    getTypeObject(headerlist).then((res) => {
                        this.dictList = res.data;
                    })
                }
                this.getlistPost();
            });
        },
        /** 点击树节点,获取table数据*/
        getlistPost() {
            var that = this;
            // this.loading = true;
            getlistbytreenodeList(this.queryParams).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                // this.loading = false;
                this.tableHeightData();


            });
        },

        /**获取门类存储位置 */
        getPathPost() {
            var that = this;
            getPath(this.queryParams.categoryId).then(response => {
                if (response.code == "200") {

                    for (var i in response.data) {
                        response.data[i].state = response.data[i].state + ''
                    }
                    this.pathList = response.data;
                    this.isnoClick = true;
                }
            })
        },
        //是否选择数据
        handleSelectionChange(ids, single, multiple) {
            console.log(this.ids)
            this.ids = ids.toString();
            this.single = single;
            this.multiple = multiple;
        },

        //表单重置
        resetQuery() {
            this.queryParams.searchcolumn = undefined
            this.queryParams.order = undefined;
            this.getlistPost();
            this.$refs.ref.clearSort()   //情况排序样式
        },
        //点击搜索
        handleQuery(searchcolumn) {
            var column = searchcolumn.filter(item => { return item.value !== '' && item.value !== null })
            this.queryParams.searchcolumn = column
            this.queryParams.order = undefined;
            this.getlistPost();
            this.$refs.ref.clearSort()
        },
        //刷新页面
        queryTableTap() {
            this.queryParams.order = undefined;
            this.getlistPost();
            this.$refs.ref.clearSort()
        },




        //双击列表进入详情页面
        celldblclick(row) {
            var level = "";
            var label = "";
            if (getLastIndexOf(this.queryParams.sub_table_name) == "F") {  //F 件
                level = 0
                label = row.TITLE;
            } else if (getLastIndexOf(this.queryParams.sub_table_name) == "V") { //卷
                level = 1
                label = row.TITLE;
            } else { //项目
                level = 3
                label = row.XMMC;
            }

            this.celldbData = {
                id: row.ID,
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                sub_table_name: this.queryParams.sub_table_name,
                label: label,
                level: level,
                ifSub_table_name: this.queryParams.sub_table_name,
                isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
                tableHeaderList: this.tableHeaderList
            }
            this.$nextTick(() => {
                if (this.subStr == "F") {  //F 进入件详情
                    this.jianDetailsOpen = true;
                } else { //进入卷详情 和项目详情
                    this.juanDetailsOpen = true
                }
            })

        },

        //关闭详情页面
        detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;
            this.projectJuanlistDeitOpen = false;
        },

        //排序
        sortChange(val) {
            this.queryParams.order = val;

            this.getlistPost();

        },


        closeDelDialog() {
            this.deitOpen = false;
        },
        //位置添加
        handleAdd() {
            this.row = undefined;
            this.deitOpen = true;
        },

        //位置修改
        handleUpdate(row) {
            this.deitOpen = true;
            this.row = row;
        },
        addsubmitForm() {
            this.deitOpen = false;
            this.getPathPost();
        },


        //位置删除
        handleDelete(row) {
            var that = this;
            this.$modal.confirm('是否确认删除当前位置数据项？').then(function () {
                deletePath(row.id).then(res1 => {
                    if (res1.code == "200") {
                        that.$modal.msgSuccess("删除成功")
                        that.getPathPost();
                    } else {
                        that.$modal.msgError("删除失败");
                    }
                })
            }).catch(res => {
                console.log("取消")
            })
        },

        //开启状态
        handleStatusChange(row) {
            console.log(row, "sdkljf")
            let text = row.state === "1" ? "启用" : "停用";
            this.$modal.confirm('确认要"' + text + '当前数据吗？').then(() => {
                updateEnable({
                    id: row.id,
                    categoryId: row.categoryId
                }).then(res => {
                    if (res.code == '200') {
                        this.$modal.msgSuccess(text + "成功");
                    } else {
                        row.state = row.state == "1" ? "0" : "1";
                    }
                }).catch(res => {
                    row.state = row.state == "1" ? "0" : "1";
                })
            }).catch(function () {
                console.log(row.state, "sdklfjklsdfjskld")
                row.state = row.state == "1" ? "0" : "1";


                console.log(row.state)
            });
        },
        //点击位置切换档案数据
        handleRowClick(row, column, event) {
            var that = this;

            this.isdaShow = true;
            this.queryParams.pathId = row.id;
            this.getqueryfieldListPost();//点击树节点获取查询字段
            this.getlistHeaderPost();/**点击树节点,获取table表头数据 */
            // console.log("00000000000000000000000",row, column, event)
        },

        //格式转换
        handleGSZHTap() {
            var that=this
            if (!this.multiple) {
                trans({
                    categoryId: this.queryParams.categoryId,
                    daIds: this.ids
                }).then(res => {
                    if(res.code=="200"){
                        that.$modal.msgSuccess("转换成功")
                    }
                })
            } else {
                that.$message({
                    message: '请选择要转换的数据！',
                    type: 'warning'
                })
            }

        },

    }
}
</script>

